import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { NzMessageService } from 'ng-zorro-antd';
import { AuthService } from 'app/services/auth.service'
import Particles from 'particlesjs'
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.less']
})
export class LoginComponent implements OnInit {

  private loginForm: FormGroup  // 登录表单

  constructor(
    private fb: FormBuilder,
    private messageService: NzMessageService,
    private router: Router,
    private authService: AuthService
  ) {
    //  初始化表单
    this.loginForm = this.fb.group({
      username: [null, [Validators.required]],
      password: [null, [Validators.required]]
    })
  }

  ngOnInit() {
    Particles.init({
      selector: '.background',
      sizeVariations: 10,
      color: '#333333',
    })
  }

  /**
   * 提交登录表单
   */
  submitForm() {
    // 设置表单访问
    Object.values(this.loginForm.controls).forEach(control => control.markAsDirty())

    if (this.loginForm.valid) {
      // 登录请求
      this.authService.login(
        this.loginForm.value.username,
        this.loginForm.value.password,
      ).then((...aaaa) => {
        this.messageService.create('success', '登录成功')
        this.router.navigate(['workspace']);
      }, () => {
        this.messageService.create('error', '用户名或密码错误')
      })
    }
  }
}
